import React, { Component } from 'react';
import {
  StyleSheet, View, Text, Modal, TouchableOpacity,
  Image, Dimensions
} from "react-native";
import { style } from '../../../../../theme/style';
import { Common } from '../../../../../component/common/Common';
import { CommonData } from './_common/common.js';
import HTTP from '../../../../../utils/http';
import { API, API_GENERATE } from '../../../../../config/api';
import { GLOBAL } from '../../../../../config/global';

const ScreenWidth = Dimensions.get('window').width;
const ScreenHeight = Dimensions.get('window').height;
const scale = ScreenWidth / 375;

export class MaintenanceDetails extends Component {
  static navigationOptions = ({ navigation }) => {
    return {
      title: '维护详情',
      headerTintColor: style.color.white,
      headerLeft: <Common type="headLeft" onPress={() => { navigation.goBack() }} color='#fff' />,
      headerRight: (<Image style={{ marginLeft: 18 * scale, width: 9 * scale, height: 16 * scale }} source={require('../../../../../imgs/goBackEmpty.png')} />),
      headerStyle: {
        elevation: 0,
        backgroundColor: style.color.themeColor,
      },
      headerTitleStyle: {
        flex: 1,
        textAlign: 'center'
      }
    }
  }

  constructor(props) {
    super(props);
    this.state = {
      previewSource: {},
      previewShow: false
    }
  }

  async getImgView (fileId) {
    const response = await HTTP.GET(API_GENERATE(API.GET_IMG_VIEW), { fileId });
    console.log('response', response)
    if (response && response.image && response.image.length) {
      this.setState({
        previewSource: { uri: response.image },
        previewShow: true
      });
    }
  }

  render () {
    const { contactorName, createTime, visitTypeName, organName, staffName, mobileNo, visitType, visitMethodName,
      visitContent, detailAddress, attachmentIdList, beginDate, endDate } = this.props.navigation.state.params;
    const visitTime = visitType == 'MAINTAIN' ?
      `${CommonData._format('date1', beginDate)}-${CommonData._format('date1', endDate)}` : CommonData._format('date1', createTime);
    return (
      <View>
        <View style={styles.salesman}>
          <Text style={{ fontSize: 12 * scale }}>维护人：{staffName}（{organName}）</Text>
          <Text style={{ fontSize: 10 * scale, marginTop: 10 * scale, marginRight: 10 * scale }}>{createTime && createTime.substring(0, 16)}</Text>
        </View>
        <View style={{ marginTop: 52 * scale, marginLeft: 24 * scale, marginRight: 24 * scale, }}>
          <View style={[styles.flexRow, styles.selectBox]}>
            <Text style={styles.needed}>*</Text>
            <View style={styles.flexRow}>
              <Text style={styles.selectTitle}>维护类型</Text>
              <Text style={styles.selectContent}>{visitTypeName}</Text>
            </View>
          </View>
          <View style={[styles.flexRow, styles.selectBox]}>
            <Text style={styles.needed}>*</Text>
            <View style={styles.flexRow}>
              <Text style={styles.selectTitle}>维护方式</Text>
              <Text style={styles.selectContent}>{visitMethodName}</Text>
            </View>
          </View>
          <View style={[styles.flexRow, styles.selectBox]}>
            <Text style={styles.needed}>*</Text>
            <View style={styles.flexRow}>
              <Text style={styles.selectTitle}>维护对象</Text>
              <Text style={styles.selectContent}>{contactorName} {mobileNo}</Text>
            </View>
          </View>
          <View style={styles.selectBox}>
            <View style={styles.flexRow}>
              <Text style={styles.needed}>*</Text>
              <View>
                <Text style={styles.selectTitle}>维护内容</Text>
              </View>
            </View>
            <Text style={styles.content}>{visitContent}</Text>
          </View>
          <View style={[styles.flexRow, styles.selectBox]}>
            <Text style={styles.needed}>*</Text>
            <View style={styles.flexRow}>
              <Text style={styles.selectTitle}>维护日期</Text>
              <Text style={styles.selectContent}>{visitTime}</Text>
            </View>
          </View>
          <View style={[styles.flexRow, styles.selectBox]}>
            <Text style={styles.needed}>*</Text>
            <View style={[styles.flexRow]}>
              <Text style={styles.selectTitle}>地址</Text>
              <Text style={[styles.selectContent, { maxWidth: 240 * scale, flexWrap: 'wrap' }]}>{detailAddress}</Text>
            </View>
          </View>
          <View style={[styles.flexRow, styles.selectBox]}>
            <Text style={styles.needed}>  </Text>
            <View style={styles.flexRow}>
              <Text style={styles.selectTitle}>附件</Text>
              <View style={styles.flexRow}>
                {
                  attachmentIdList && attachmentIdList.length ?
                    attachmentIdList.map((item, index) => {
                      return (
                        <Text style={styles.annex} onPress={() => { item && this.getImgView(item) }}>【查看-1】</Text>
                      )
                    }) : <Text style={styles.annex}>无</Text>
                }
              </View>
            </View>
          </View>
        </View>

        <Modal
          animationType={"fade"}
          transparent={true}
          visible={this.state.previewShow}
          onRequestClose={() => { }}>
          <TouchableOpacity activeOpacity={1} style={styles.preview} onPress={() => this.setState({ previewShow: false })}>
            <Image source={this.state.previewSource} style={{ width: '100%', height: '50%' }} />
          </TouchableOpacity>
        </Modal>
      </View>
    )
  }
}
const styles = StyleSheet.create({
  flexRow: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  salesman: {
    paddingTop: 18 * scale,
    paddingBottom: 11 * scale,
    paddingRight: 8 * scale,
    alignItems: 'flex-end',
    backgroundColor: '#F4F7FE'
  },
  needed: {
    fontSize: 12 * scale,
    color: '#F80A0A',
    marginRight: 5 * scale
  },
  selectBox: {
    marginBottom: 26 * scale
  },
  selectTitle: {
    fontSize: 12 * scale,
    color: '#000000',
    // marginRight: 30,
    width: 70 * scale
  },
  selectContent: {
    fontSize: 12 * scale,
    color: '#34475F',
  },
  content: {
    fontSize: 12 * scale,
    marginTop: 20 * scale,
    marginLeft: 20 * scale,
    marginRight: 20 * scale,
    color: '#34475F'
  },
  annex: {
    fontSize: 12 * scale,
    color: '#0E5BC6',
    marginRight: 15 * scale
  },
  preview: {
    height: GLOBAL.SCREEN_HEIGHT,
    backgroundColor: 'rgba(0,0,0,.5)',
    alignItems: 'center',
    justifyContent: 'center'
  },
})